<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频洽谈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
        }

        .main-container {
            width: 1200px;
            height: 1100px;
            background: transparent;
            border: 2px solid #87ceeb;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }



        /* 关闭图标 */
        .close-icon {
            position: absolute;
            left: 54px;
            top: 444px;
            width: 29px;
            height: 29px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .close-icon:hover {
            transform: rotate(90deg);
            background-color: rgba(129, 217, 230, 0.8);
        }

        .close-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 四个导航箭头图标 - 根据新的参考信息调整位置 */
        .nav-icon-1 {
            position: absolute;
            left: 74px;
            top: 715px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .nav-icon-2 {
            position: absolute;
            left: 99px;
            top: 715px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .nav-icon-3 {
            position: absolute;
            left: 91px;
            top: 715px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .nav-icon-4 {
            position: absolute;
            left: 83px;
            top: 715px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .nav-icon-1:hover,
        .nav-icon-2:hover,
        .nav-icon-3:hover,
        .nav-icon-4:hover {
            transform: translateX(3px);
            background-color: rgba(129, 217, 230, 0.8);
        }

        .nav-icon-1 img,
        .nav-icon-2 img,
        .nav-icon-3 img,
        .nav-icon-4 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 五个小图标 */
        .small-icon-1 {
            position: absolute;
            left: 437px;
            top: 450px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-2 {
            position: absolute;
            left: 453px;
            top: 450px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-3 {
            position: absolute;
            left: 469px;
            top: 450px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-4 {
            position: absolute;
            left: 485px;
            top: 450px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-5 {
            position: absolute;
            left: 499px;
            top: 450px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-1:hover,
        .small-icon-2:hover,
        .small-icon-3:hover,
        .small-icon-4:hover,
        .small-icon-5:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
        }

        .small-icon-1 img,
        .small-icon-2 img,
        .small-icon-3 img,
        .small-icon-4 img,
        .small-icon-5 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 主数据看板 */
        .dashboard-main {
            position: absolute;
            left: 55px;
            top: 489px;
            width: 459px;
            height: 224px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }

        .dashboard-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 矩形组件1 - 标题栏 */
        .rect-component-1 {
            position: absolute;
            left: 54px;
            top: 441px;
            width: 353px;
            height: 32px;
            line-height: 28px;
            background: linear-gradient(90deg, rgba(11,70,101,1) 0%,rgba(58,183,219,0.21) 50%,rgba(255,255,255,0) 100%);
            color: rgba(129,217,230,1);
            font-size: 20px;
            text-align: left;
            font-family: PingFangSC-regular;
            padding: 0 15px;
            border-radius: 4px;
            transition: all 0.3s ease;
            z-index: 5;
        }

        .rect-component-1:hover {
            background: linear-gradient(90deg, rgba(11, 70, 101, 1) 0%, rgba(58, 183, 219, 0.31) 50%, rgba(255, 255, 255, 0) 100%);
        }

        /* 矩形组件2 - 背景容器 */
        .rect-component-2 {
            position: absolute;
            left: 54px;
            top: 474px;
            width: 459px;
            height: 263px;
            line-height: 20px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(58,183,219,0.21) 0%,rgba(58,183,183,0) 100%);
            color: rgba(16,16,16,1);
            font-size: 14px;
            text-align: center;
            box-shadow: 1px 1px 1px 1px rgba(129,217,230,1);
            font-family: PingFangSC-regular;
            padding: 20px;
            border-radius: 8px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        .rect-component-2:hover {
            box-shadow: 2px 2px 3px 2px rgba(129, 217, 230, 1);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(58, 183, 219, 0.31) 0%, rgba(58, 183, 183, 0) 100%);
        }

        /* 线条组件1 */
        .line-component-1 {
            position: absolute;
            left: 146px;
            top: 724px;
            width: 361px;
            height: 1px;
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(129,217,230,1);
            transition: all 0.3s ease;
            z-index: 8;
        }

        .line-component-1:hover {
            background-color: rgba(129, 217, 230, 0.8);
            border-color: rgba(129, 217, 230, 1);
            height: 2px;
        }

        /* 线条组件2 */
        .line-component-2 {
            position: absolute;
            left: 121px;
            top: 732px;
            width: 361px;
            height: 1px;
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(129,217,230,1);
            transition: all 0.3s ease;
            z-index: 8;
        }

        .line-component-2:hover {
            background-color: rgba(129, 217, 230, 0.8);
            border-color: rgba(129, 217, 230, 1);
            height: 2px;
        }

        /* 特殊效果 */
        .glow-effect {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, transparent 0%, rgba(135, 206, 235, 0.1) 100%);
            pointer-events: none;
        }

        /* 响应式调整 */
        @media (max-width: 1250px) {
            .main-container {
                transform: scale(0.9);
            }
        }

        @media (max-width: 1100px) {
            .main-container {
                transform: scale(0.8);
            }
        }
    </style>
</head>
<body>
<div class="main-container">
    <!-- 发光效果 -->
    <div class="glow-effect"></div>

    <!-- 关闭图标 -->
    <div class="close-icon">
        <img src="https://sfile.chatglm.cn/chatglm4/0975be71-e4ca-4013-8f63-f85c63f62459.png"
             alt="关闭图标">
    </div>

    <!-- 矩形组件1 - 标题栏 -->
    <div class="rect-component-1">
        视频洽谈
    </div>

    <!-- 矩形组件2 - 背景容器 -->
    <div class="rect-component-2">
        <img src="https://sfile.chatglm.cn/chatglm4/e5e537e5-4a5c-4c76-910e-063411316d05.png"
             alt="矩形背景" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
    </div>

    <!-- 主数据看板 -->
    <div class="dashboard-main">
        <img src="https://sfile.chatglm.cn/chatglm4/d719aad1-0fc6-4abd-87f3-6bb31f3e94fd.png"
             alt="视频洽谈">
    </div>

    <!-- 五个小图标 -->
    <div class="small-icon-1">
        <img src="https://sfile.chatglm.cn/chatglm4/0873705f-7fb8-4e51-9c02-84089d30230d.png"
             alt="小图标1">
    </div>
    <div class="small-icon-2">
        <img src="https://sfile.chatglm.cn/chatglm4/a8cf9d43-ee75-4dcb-a47a-144a8ba69eac.png"
             alt="小图标2">
    </div>
    <div class="small-icon-3">
        <img src="https://sfile.chatglm.cn/chatglm4/d96cb6da-589e-4c3b-a5b9-2c20d233cef5.png"
             alt="小图标3">
    </div>
    <div class="small-icon-4">
        <img src="https://sfile.chatglm.cn/chatglm4/91c859f0-49b1-48af-9417-6e39385a2f2a.png"
             alt="小图标4">
    </div>
    <div class="small-icon-5">
        <img src="https://sfile.chatglm.cn/chatglm4/37e7942f-90ba-4d4c-942d-489ab286b63b.png"
             alt="小图标5">
    </div>

    <!-- 四个导航箭头图标 - 更新为新图标和新位置 -->
    <div class="nav-icon-1">
        <img src="https://sfile.chatglm.cn/chatglm4/098e25d5-df71-454d-b5dd-bbbd795fa89f.png"
             alt="导航图标1">
    </div>
    <div class="nav-icon-2">
        <img src="https://sfile.chatglm.cn/chatglm4/d2398051-11dd-46c8-898a-e619bbdb3339.png"
             alt="导航图标2">
    </div>
    <div class="nav-icon-3">
        <img src="https://sfile.chatglm.cn/chatglm4/169ed0db-a09c-494c-948a-fe90ecc6fcb6.png"
             alt="导航图标3">
    </div>
    <div class="nav-icon-4">
        <img src="https://sfile.chatglm.cn/chatglm4/9d6fcc4c-d715-409a-8f73-b63517121d7e.png"
             alt="导航图标4">
    </div>

    <!-- 线条组件1 -->
    <div class="line-component-1"></div>

    <!-- 线条组件2 -->
    <div class="line-component-2"></div>
</div>

<script>
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', function () {
        const container = document.querySelector('.main-container');
        container.style.opacity = '0';
        container.style.transform = 'scale(0.95)';

        setTimeout(() => {
            container.style.transition = 'all 1s ease-out';
            container.style.opacity = '1';
            container.style.transform = 'scale(1)';
        }, 100);

        // 为所有图片添加错误处理
        const images = document.querySelectorAll('img');
        images.forEach(img => {
            img.addEventListener('error', function () {
                this.style.display = 'none';
                const placeholder = document.createElement('div');
                placeholder.style.cssText = `
                        width: ${this.offsetWidth}px;
                        height: ${this.offsetHeight}px;
                        background: rgba(135, 206, 235, 0.1);
                        border: 1px dashed #87ceeb;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #87ceeb;
                        font-size: 10px;
                        border-radius: 2px;
                    `;
                placeholder.textContent = '图片';
                this.parentNode.insertBefore(placeholder, this);
            });
        });

        // 关闭按钮功能
        const closeIcon = document.querySelector('.close-icon');
        closeIcon.addEventListener('click', function () {
            container.style.transition = 'all 0.5s ease-in';
            container.style.opacity = '0';
            container.style.transform = 'scale(0.9)';
            setTimeout(() => {
                if (confirm('确定要关闭看板吗？')) {
                    container.style.display = 'none';
                } else {
                    container.style.transition = 'all 0.5s ease-out';
                    container.style.opacity = '1';
                    container.style.transform = 'scale(1)';
                }
            }, 500);
        });

        // 导航图标点击效果
        const navIcons = document.querySelectorAll('[class^="nav-icon-"]');
        navIcons.forEach((icon, index) => {
            icon.addEventListener('click', function () {
                this.style.animation = 'bounce 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`导航图标 ${index + 1} 被点击`);
            });
        });

        // 小图标点击效果
        const smallIcons = document.querySelectorAll('[class^="small-icon-"]');
        smallIcons.forEach((icon, index) => {
            icon.addEventListener('click', function () {
                this.style.animation = 'pulse 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`小图标 ${index + 1} 被点击`);
            });
        });

        // 矩形组件点击效果
        const rectComponents = document.querySelectorAll('[class^="rect-component-"]');
        rectComponents.forEach((component, index) => {
            component.addEventListener('click', function () {
                this.style.animation = 'pulse 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`矩形组件 ${index + 1} 被点击`);
            });
        });

        // 线条组件点击效果
        const lineComponents = document.querySelectorAll('[class^="line-component-"]');
        lineComponents.forEach((line, index) => {
            line.addEventListener('click', function () {
                this.style.animation = 'lineGlow 0.8s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 800);
                console.log(`线条组件 ${index + 1} 被点击`);
            });
        });

        // 添加键盘快捷键
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                closeIcon.click();
            }
            // 数字键1-4控制导航图标
            if (e.key >= '1' && e.key <= '4') {
                const navIndex = parseInt(e.key) - 1;
                if (navIcons[navIndex]) {
                    navIcons[navIndex].click();
                }
            }
            // 数字键5-9控制小图标
            if (e.key >= '5' && e.key <= '9') {
                const smallIconIndex = parseInt(e.key) - 5;
                if (smallIcons[smallIconIndex]) {
                    smallIcons[smallIconIndex].click();
                }
            }
        });
    });

    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
            @keyframes bounce {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            @keyframes lineGlow {
                0% { opacity: 1; }
                50% { opacity: 0.3; box-shadow: 0 0 10px rgba(129,217,230,0.8); }
                100% { opacity: 1; }
            }
        `;
    document.head.appendChild(style);

    // 实时时间更新
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN');
    }

    setInterval(updateTime, 1000);
</script>
</body>
</html>
